<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<style>
			*{
				margin-top: 40px;
			}
			.test{
				background-color: orange;
				padding: 20px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				三个重要的事件修饰符：
							1.prevent：阻止默认事件；
							2.stop：阻止事件冒泡；
							3.once：事件只触发一次；
				备注：事件修饰符，可以连写
		-->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 用prevent事件修饰符，去阻止默认事件 -->
			<a href="http://www.atguigu.com" @click.prevent.once="welcome">点我展示欢迎信息</a>

			<!-- 用stop事件修饰符，去阻止冒泡  -->
			<div class="test" @click="welcome">
				<button @click.stop="welcome">点我展示欢迎信息</button>
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="welcome">点我展示欢迎信息</a> -->
			</div>

			<button @click.once="welcome">点我展示欢迎信息（点1次后，就废了）</button>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#demo',
			methods:{
				welcome(event){
					alert('同学你Vue学的不错啊！')
				}
			}
		})
	</script>
</html>